<template>
    <div class="login">
        <header><img src="../assets/assets/头部.png" alt=""></header>
        <div class="port">
            <div><img src="../assets/assets/编组.svg" alt=""></div>
        </div>
        <div class="box">
            <input type="text" placeholder="请输入手机号" v-model="phone">
            <input type="password" placeholder="请输入密码" v-model="password">
        </div>
        <div class="btn" @click="login">登录</div>
        <div class="footer">
            <router-link to="./register">立即注册</router-link>|<router-link to="" @click="">忘记密码
            </router-link>
        </div>
        <!-- <toast v-show='show' 
        :title="'消息提示'" 
        :btntype="2"
        @gomine="gomine" @gohome="gohome"
        >
        <template #body>
            <p>登录成功</p>
            <div>前往的页面</div>           
        </template>>
        </toast>> -->
    </div>

</template>

<script setup>
// import toast from '../components/toast.vue'
// import { useRouter } from 'vue-router';
import { verify } from "../utils/utils"
import { post } from '../utils/request.js'
import { ref, computed } from "vue"
import { Dialog } from 'vant';

import router from '@/router';
let phone = ref('13211288468')
let password = ref('123456')
//正则验证 如果符号返回布尔值true
let changeUserPhone = computed(() => {
    return verify('phone', phone.value);
});

let changeUserPassword = computed(() => {
    return verify('password', password.value);
});

//请求数据
const login = async () => {

    if (changeUserPhone.value && changeUserPassword.value) {
        let res = await post('/login', {
            "phone": phone.value,
            "password": password.value
        })
        console.log(res)
        let token = res.result.token;
        sessionStorage.setItem("token", token)
        console.log(token);
        // router.push("/")
        console.log("登录成功");
    }
    else {
        console.log("重新输入");
    }

}


</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

input {
    border-style: none;
}

.login {
    width: 100%;
    height: 6.67rem;

    header {
        width: 100%;
        height: .2rem;
        background-color: aliceblue;
    }

    .port {
        width: 100%;
        height: 2.26rem;
        padding-top: 1.2rem;
        box-sizing: border-box;

        div {
            width: .66rem;
            height: .66rem;
            border-radius: 50%;
            margin: 0 auto;
            background-color: gray;
        }
    }

    .box {
        width: 2.95rem;
        height: 1.12rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0 auto;
        margin-bottom: .32rem;

        input {
            width: 2.95rem;
            height: .48rem;
            background-color: aliceblue;
            border-radius: .06rem;
            box-sizing: border-box;
            text-indent: .2rem;
        }

    }

    .btn {

        background-color: #0091FF;
        width: 2.95rem;
        height: .48rem;
        margin-top: 0.32rem;
        margin: 0 auto;
        text-align: center;
        line-height: .48rem;
        font-size: .16rem;
        color: white;
        border-radius: .04rem;
        margin-bottom: .16rem;
    }

    .footer {
        text-align: center;
    }
}
</style>